"use client";
import React from "react";
import { Pencil, Plus } from "lucide-react";

// Define types
interface CardData {
  id: number;
  title: string;
  description: string;
  status: string;
  lastUpdated: string;
}

interface CardProps {
  data: CardData;
  onUpdate: (id: number) => void;
}

// Mock data
const mockData: CardData[] = [
  {
    id: 1,
    title: "Project Alpha",
    description: "A cutting-edge project for automation",
    status: "In Progress",
    lastUpdated: "2024-03-15",
  },
  {
    id: 2,
    title: "Project Beta",
    description: "Machine learning integration project",
    status: "Completed",
    lastUpdated: "2024-03-10",
  },
  {
    id: 3,
    title: "Project Gamma",
    description: "Cloud infrastructure optimization",
    status: "Planning",
    lastUpdated: "2024-03-05",
  },
];

// Card component
const Card: React.FC<CardProps> = ({ data, onUpdate }) => (
  <div className="bg-white rounded-lg shadow-md p-6 mb-4 hover:shadow-lg transition-shadow">
    <div className="flex justify-between items-start">
      <div>
        <h3 className="text-xl font-semibold mb-2">{data.title}</h3>
        <p className="text-gray-600 mb-2">{data.description}</p>
        <div className="flex items-center gap-4">
          <span className="text-sm text-gray-500">Status: {data.status}</span>
          <span className="text-sm text-gray-500">
            Last Updated: {data.lastUpdated}
          </span>
        </div>
      </div>
      <button
        onClick={() => onUpdate(data.id)}
        className="text-blue-500 hover:text-blue-700 p-2"
        aria-label="Update"
      >
        <Pencil />
      </button>
    </div>
  </div>
);

function app000002() {
  const handleUpdate = (id: number) => {
    console.log(`Update clicked for item ${id}`);
    // Add your update logic here
  };

  const handleCreate = () => {
    console.log("Create clicked");
    // Add your create logic here
  };

  return (
    <div className="container mx-auto p-6">
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-2xl font-bold">Projects Dashboard</h1>
        <button
          onClick={handleCreate}
          className="bg-blue-500 text-white px-4 py-2 rounded-lg flex items-center gap-2 hover:bg-blue-600 transition-colors"
        >
          <Plus />
          Create New
        </button>
      </div>

      <div className="grid gap-4">
        {mockData.map((item) => (
          <Card key={item.id} data={item} onUpdate={handleUpdate} />
        ))}
      </div>
    </div>
  );
}

export default app000002;