'use client'
import { Card, CardHeader, CardContent, CardTitle, CardDescription } from "@/components/mutual/shadcnui/card";
import { TableCardProps } from "@/validations/mutual/table/type";
import { useEffect, useState } from "react";

const ComponentTableCardPlain: React.FC<TableCardProps> = ({ data, columns, translations }) => {
    const [tableData, setTableData] = useState<any>(data);
    useEffect(() => {
        setTableData(data);
    }, [data]);


    const renderCards = () => {
        return tableData?.map((item: any, index: number) => (
            <Card className="w-full min-w-full my-2 p-5" key={index}>
                <CardHeader>
                    <CardTitle>Row : {index + 1}</CardTitle>
                    <CardDescription>{item.uuid}</CardDescription>
                </CardHeader>
                <CardContent>
                    <div className="flex flex-col items-start justify-start">Email: {item.email}</div>
                    <div className="flex flex-col items-start justify-start">Phone Number: {item.phoneNumber}</div>
                    <div>Created At: {item.createdAt}</div>
                </CardContent>
            </Card>
        ))
    }

    const noDataFound = () => (
        <>
            No Data Found
        </>
    )
    return (
        <>
            {
                tableData ? (
                    <div className="w-full min-w-full">
                        <div className="flex flex-col items-center justify-start my-6">{renderCards()}</div>
                    </div>
                ) : (noDataFound())
            }
        </>
    )
}

export default ComponentTableCardPlain