import { Plural, Trans } from "@lingui/react/macro";
import { FolderKanban } from "lucide-react";

export interface ProjectCreatedCardProps {
  name: string;
  memberCount: number;
  onClick: () => void;
}

export function ProjectCreatedCard({ name, memberCount, onClick }: ProjectCreatedCardProps) {
  return (
    <div className="my-2 flex justify-start">
      <button
        type="button"
        data-testid="project-created-card"
        onClick={onClick}
        className="w-[min(480px,96%)] rounded-[18px] border border-border bg-card/75 p-3.5 text-left shadow-xs transition-all hover:border-primary/40 hover:bg-card hover:shadow-md"
      >
        <div className="flex items-center justify-between gap-2">
          <div className="flex min-w-0 items-center gap-2.5">
            <span className="grid size-control-sm place-items-center rounded-md bg-primary/10 text-primary">
              <FolderKanban strokeWidth={2} aria-hidden="true" className="size-icon-md" />
            </span>
            <div className="truncate text-ui-body font-semibold text-foreground">{name}</div>
            <span className="rounded-md bg-muted px-1.5 py-0.5 text-ui-label font-medium uppercase tracking-wider text-muted-foreground">
              <Trans>Project</Trans>
            </span>
          </div>
          <span className="shrink-0 rounded-full bg-success/15 px-2.5 py-0.5 text-ui-body-sm font-medium text-success">
            <Trans>Created</Trans>
          </span>
        </div>
        <p className="mt-2.5 text-ui-body-sm leading-relaxed text-muted-foreground">
          <Plural value={memberCount} one="# agent invited" other="# agents invited" />
        </p>
        <div className="mt-2.5 text-ui-body-sm font-medium text-primary">
          <Trans>Open project →</Trans>
        </div>
      </button>
    </div>
  );
}