import React from 'react';
import styles from './TableComponent.module.css';

interface TableData {
  field: string;
  entry: string;
}

const defaultData: TableData[] = [
  { field: "Startup name", entry: "Markup" },
  { field: "Describe Startup", entry: "A curated directory of 400 resources and tools for startups" },
  { 
    field: "Describe the\nproblem you\nsolve", 
    entry: "The problem we address is the high energy consumption and environmental impact of traditional air conditioning systems. Our solution is an innovative air conditioning unit that uses advanced cooling technology to reduce energy usage by up to 50%."
  },
  {
    field: "Target\ncustomer(s)",
    entry: "Our target audience includes eco-conscious homeowners and businesses looking to reduce their carbon footprint and save on energy costs."
  },
  {
    field: "Unique Selling\nPoint",
    entry: "We offer a curated overview of only the best recommendations"
  },
  {
    field: "Traction",
    entry: "Since our beta launch six months ago, we've onboarded 500+ small businesses with an 85% retention rate, reducing stock outs by 30% and overstock by 20%."
  },
  {
    field: "How much funds\nand use of it",
    entry: "We are seeking $1 million in funding. The funds will be used for scaling production, expanding our marketing efforts, and enhancing our product's features based on customer feedback."
  }
];

interface TableComponentProps {
  data?: TableData[];
}

const TableComponent: React.FC<TableComponentProps> = ({ data = defaultData }) => {
  return (
    <div className={styles.tableContainer}>
      <table className={styles.table}>
        <thead>
          <tr>
            <th className={styles.headerCell}>Field</th>
            <th className={styles.headerCell}>Entry</th>
          </tr>
        </thead>
        <tbody>
          {data.map((row, index) => (
            <tr key={index} className={styles.tableRow}>
              <td className={styles.fieldCell}>
                {row.field.split('\n').map((line, i) => (
                  <React.Fragment key={i}>
                    {line}
                    {i < row.field.split('\n').length - 1 && <br />}
                  </React.Fragment>
                ))}
              </td>
              <td className={styles.entryCell}>
                {row.entry.split('\n').map((line, i) => (
                  <React.Fragment key={i}>
                    {line}
                    {i < row.entry.split('\n').length - 1 && <br />}
                  </React.Fragment>
                ))}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default TableComponent;