"use client";

import Card from "./Card";
import AddNewCard from "./AddNewCard";
import type { Portfolio } from "@/app/db/schema/portfolio";

type PortfoliosType = Array<Portfolio>;

export default function CardTiles({
  Portfolios,
}: {
  Portfolios: PortfoliosType;
}) {
  return (
    <div className="flex justify-center">
      <div className="grid grid-cols-1 gap-6 max-w-7xl sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
        <AddNewCard />
        {Portfolios.map((portfolio, index) => {
          const image_idx = index % 5;
          return (
            <Card
              key={portfolio.id.toString()}
              id={portfolio.id}
              title={portfolio.name}
              image={`house-icon.svg`}
              budget={portfolio.budget}
              status={portfolio.status}
              
            />
          );
        })}
      </div>
    </div>
  );
}
