Project Ticket Card

import * as React from "react";
import { ProjectTicketCard } from "@/components/ui/project-ticket-card"; // Adjust the import path as needed

// Mock data for the demo
const mockProjectManager = {
  name: "Miguel Lorenzo",
  avatarUrl: "https://i.pravatar.cc/150?u=a042581f4e29026704d",
};

const mockAssignedUsers = [
  {
    name: "John Doe",
    avatarUrl: "https://i.pravatar.cc/150?u=a042581f4e29026701d",
  },
  {
    name: "Jane Smith",
    avatarUrl: "https://i.pravatar.cc/150?u=a042581f4e29026702d",
  },
  {
    name: "Sam Wilson",
    avatarUrl: "https://i.pravatar.cc/150?u=a042581f4e29026703d",
  },
];

const mockComments = [
  {
    id: 1,
    user: {
      name: "Insan Kamil",
      role: "Design Lead",
      avatarUrl: "https://i.pravatar.cc/150?u=a042581f4e29026705d",
    },
    timestamp: "Friday 3:12 PM",
    message: "Hey guys, I updated the document ya.",
  },
  {
    id: 2,
    user: {
      name: "Miguel Lorenzo",
      role: "Project Manager",
      avatarUrl: "https://i.pravatar.cc/150?u=a042581f4e29026704d",
    },
    timestamp: "Friday 3:15 PM",
    message: "Thanks, Insan! Reviewing it now.",
  },
];

const ProjectTicketDemo = () => {
  return (
    <div className="flex min-h-[600px] w-full items-center justify-center bg-background p-4 md:p-10">
      <ProjectTicketCard
        projectName="Revamp Payment"
        status="In Progress"
        projectManager={mockProjectManager}
        assignedTo={mockAssignedUsers}
        timeline={{ startDate: "12/12/2024", endDate: "04/01/2025" }}
        comments={mockComments}
        isDraft={true}
      />
    </div>
  );
};

export default ProjectTicketDemo;