import { Sandbox } from "@/lib/types";
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import Image from "next/image";
import Button from "../ui/customButton";
import { ChevronRight } from "lucide-react";
import Avatar from "../ui/avatar";
import Link from "next/link";

export default function DashboardSharedWithMe({
  shared,
}: {
  shared: {
    id: string;
    name: string;
    type: "react" | "node";
    author: string;
    sharedOn: Date;
  }[];
}) {
  return (
    <div className="grow p-4 flex flex-col">
      <div className="text-xl font-medium mb-8">Shared With Me</div>
      {shared.length > 0 ? (
        <div className="grow w-full">
          <Table>
            <TableHeader>
              <TableRow className="hover:bg-background">
                <TableHead>Sandbox Name</TableHead>
                <TableHead>Shared By</TableHead>
                <TableHead>Sent On</TableHead>
                <TableHead className="text-right"></TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {shared.map((sandbox) => (
                <TableRow>
                  <TableCell>
                    <div className="font-medium flex items-center">
                      <Image
                        alt=""
                        src={
                          sandbox.type === "react"
                            ? "/project-icons/react.svg"
                            : "/project-icons/node.svg"
                        }
                        width={20}
                        height={20}
                        className="mr-2"
                      />
                      {sandbox.name}
                    </div>
                  </TableCell>
                  <TableCell>
                    <div className="flex items-center">
                      <Avatar name={sandbox.author} className="mr-2" />
                      {sandbox.author}
                    </div>
                  </TableCell>
                  <TableCell>
                    {new Date(sandbox.sharedOn).toLocaleDateString()}
                  </TableCell>
                  <TableCell className="text-right">
                    <Link href={`/code/${sandbox.id}`}>
                      <Button>
                        Open <ChevronRight className="w-4 h-4 ml-2" />
                      </Button>
                    </Link>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      ) : (
        <div className="text-muted-foreground text-sm">
          No sandboxes here. Get a friend to share one with you, and try out
          live collaboration!
        </div>
      )}
    </div>
  );
}