"use client";
import Avatar from "@/components/avatar";
import { Icons } from "@/components/icons";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import type { Group } from "@/server/db/schema";
import { useRouter } from "next/navigation";
import React from "react";

function GroupCard({ group }: { group: Group }) {
  const router = useRouter();
  return (
    <Card>
      <CardHeader className="flex items-center justify-between">
        <div className=" flex flex-col gap-2">
          <div className="flex items-center gap-4">
            <CardTitle className="flex items-center gap-1">
              <Icons.group className="size-4" />
              <span>{group.name}</span>
            </CardTitle>
          </div>
          <ul className="flex ">
            {group?.members?.slice(0, 4)?.map(({ user }, idx) => (
              <li
                key={idx}
                style={{
                  transform: `translateX(-${idx * 4}px)`,
                }}
              >
                <Avatar src={user?.image} fb={user?.name} className="size-4" />
              </li>
            ))}
            {Number(group?.members?.length) > 4 && (
              <li
                style={{
                  transform: `translateX(-20px)`,
                }}
                className="size-4 bg-foreground text-background text-xs items-center justify-center rounded-full "
              >
                <span>+{Number(group?.members?.length) - 4}</span>
              </li>
            )}
          </ul>
          <CardDescription>
            <p>{group.description}</p>
          </CardDescription>
        </div>
        <Button
          className=" h-max flex items-center  bg-foreground text-background  rounded-lg pl-4  w-24 justify-between"
          onClick={(e) => {
            e.preventDefault();
            router.push(`/add?groupId=${group.id}`);
          }}
        >
          <span>Add</span>
          <Icons.addSquare className="size-8" />
        </Button>
      </CardHeader>
    </Card>
  );
}

export default GroupCard;