Shopping Carts

import Image from "next/image";
import { Ban, Check, MinusIcon, PlusIcon, SearchIcon, TrashIcon, X } from "lucide-react";

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from "@/components/ui/select";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";

import { CartItem } from "./type";
import { ButtonGroup } from "@/components/ui/button-group";
import { Input } from "@/components/ui/input";

export function CartListItem({ item }: { item: CartItem }) {
  return (
    <div
      key={item.id}
      className="bg-muted/50 hover:bg-muted flex items-start space-x-4 rounded-lg p-4">
      <div className="relative shrink-0">
        <Image
          src={item.image}
          className="aspect-square size-20 rounded-md object-cover"
          width={60}
          height={60}
          alt={item.title}
          unoptimized
        />
      </div>

      <div className="flex-1">
        <div className="flex items-center justify-between">
          <div className="space-y-1">
            <h3 className="font-semibold">{item.title}</h3>
            <div className="text-muted-foreground flex gap-2 text-sm">
              <span className="text-xs">
                {item.variant} | {item.size}
              </span>
              {item.in_stock ? (
                <Badge variant="outline" className="text-green-600">
                  <Check className="mr-0.5 size-3" />
                  In stock
                </Badge>
              ) : (
                <Badge variant="outline" className="text-muted-foreground">
                  <Ban className="mr-0.5 size-3" />
                  Sold out
                </Badge>
              )}
            </div>
            <p className="text-sm">{item.price}</p>
          </div>

          <div className="flex flex-col space-x-4 sm:flex-row">
            <ButtonGroup className="w-30">
              <Input defaultValue={1} className="h-8 text-center" readOnly />
              <Button variant="outline" size="sm" aria-label="Search">
                <PlusIcon />
              </Button>
              <Button variant="outline" size="sm" aria-label="Search">
                <MinusIcon />
              </Button>
            </ButtonGroup>

            <Button variant="ghost" size="icon-sm">
              <TrashIcon className="size-4 text-red-600" />
              <span className="sr-only">Remove item</span>
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}