import React from 'react';
import { BentoGrid, BentoGridItem } from './ui/BentoGrid';
import { spreadsheetData, FuturePathItems} from '@/data/';

const FuturePath = () => {
  return (
    <section id="futurepath">
    <div className="relative w-full max-w-5xl mx-auto py-20">
       <h1 className="heading p-5">
        My Future {" "}
        <span className="text-purple">Path</span>
      </h1>
      {FuturePathItems.map(({paragraph1, paragraph2}) =>
      <div>
      <p className="text-lg text-neutral-50 mb-6">
        {paragraph1}
      </p>
      <p className="text-lg text-neutral-50 mb-6">
        {paragraph2}
      </p>
      </div>
    )}

<h1 className="heading p-5">
         <span className="text-purple">Finances</span>
      </h1>
    <BentoGrid className="max-w-7xl mx-auto">
      {spreadsheetData.map((section, i) => (
        <BentoGridItem
          key={i}
          title={section.title}
          rows={section.rows}
          total={section.total}
          className="md:col-span-1"
        />
      ))}
    </BentoGrid>
    </div>
    </section>
  );
};

export default FuturePath;