import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Separator } from "@/components/ui/separator"

export function EcommerceUI() {
  return (
    <div className="space-y-8">
      <div>
        <h2 className="text-2xl font-bold mb-4">E-commerce Components</h2>
        <p className="text-muted-foreground mb-6">
          Build beautiful shopping experiences with these customized e-commerce components
        </p>
      </div>

      {/* Product Cards */}
      <div className="grid gap-6 md:grid-cols-3">
        {[
          {
            name: "Modern Desk Lamp",
            price: "$89.99",
            image: "/modern-desk-lamp.png",
            badge: "New",
            badgeVariant: "default",
          },
          {
            name: "Ergonomic Office Chair",
            price: "$299.99",
            image: "/ergonomic-office-chair.png",
            originalPrice: "$349.99",
            badge: "Sale",
            badgeVariant: "destructive",
          },
          {
            name: "Smart Home Speaker",
            price: "$129.99",
            image: "/smart-home-speaker.png",
            badge: "Popular",
            badgeVariant: "secondary",
          },
        ].map((product, index) => (
          <Card key={index} className="overflow-hidden">
            <div className="relative">
              <img src={product.image || "/placeholder.svg"} alt={product.name} className="w-full h-48 object-cover" />
              {product.badge && (
                <div className="absolute top-2 right-2">
                  <Badge variant={product.badgeVariant as any}>{product.badge}</Badge>
                </div>
              )}
            </div>
            <CardContent className="p-4">
              <h3 className="font-medium text-lg">{product.name}</h3>
              <div className="flex items-center mt-2">
                <span className="font-bold">{product.price}</span>
                {product.originalPrice && (
                  <span className="ml-2 text-sm text-muted-foreground line-through">{product.originalPrice}</span>
                )}
              </div>
              <div className="flex items-center mt-4">
                {[1, 2, 3, 4, 5].map((star) => (
                  <svg
                    key={star}
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill={star <= 4 ? "currentColor" : "none"}
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="text-yellow-500"
                  >
                    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                  </svg>
                ))}
                <span className="ml-2 text-sm text-muted-foreground">(42)</span>
              </div>
            </CardContent>
            <CardFooter className="p-4 pt-0">
              <Button className="w-full">Add to Cart</Button>
            </CardFooter>
          </Card>
        ))}
      </div>

      {/* Shopping Cart */}
      <Card className="mt-8">
        <CardHeader>
          <CardTitle>Your Shopping Cart</CardTitle>
          <CardDescription>Review and checkout your items</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {[
              {
                name: "Modern Desk Lamp",
                price: "$89.99",
                quantity: 1,
                image: "/modern-desk-lamp.png",
              },
              {
                name: "Smart Home Speaker",
                price: "$129.99",
                quantity: 2,
                image: "/smart-home-speaker.png",
              },
            ].map((item, index) => (
              <div key={index} className="flex items-center space-x-4">
                <div className="w-16 h-16 rounded-md overflow-hidden">
                  <img src={item.image || "/placeholder.svg"} alt={item.name} className="w-full h-full object-cover" />
                </div>
                <div className="flex-1">
                  <h4 className="font-medium">{item.name}</h4>
                  <div className="flex items-center mt-1">
                    <span className="text-sm text-muted-foreground">Qty: {item.quantity}</span>
                    <span className="mx-2 text-muted-foreground">•</span>
                    <span className="text-sm font-medium">{item.price}</span>
                  </div>
                </div>
                <Button variant="ghost" size="sm" className="text-muted-foreground">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  >
                    <path d="M3 6h18"></path>
                    <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
                    <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
                  </svg>
                </Button>
              </div>
            ))}
          </div>
          <Separator className="my-4" />
          <div className="space-y-2">
            <div className="flex justify-between">
              <span className="text-muted-foreground">Subtotal</span>
              <span>$349.97</span>
            </div>
            <div className="flex justify-between">
              <span className="text-muted-foreground">Shipping</span>
              <span>$9.99</span>
            </div>
            <div className="flex justify-between">
              <span className="text-muted-foreground">Tax</span>
              <span>$35.00</span>
            </div>
            <Separator className="my-2" />
            <div className="flex justify-between font-medium">
              <span>Total</span>
              <span>$394.96</span>
            </div>
          </div>
        </CardContent>
        <CardFooter className="flex flex-col space-y-2">
          <Button className="w-full">Proceed to Checkout</Button>
          <Button variant="outline" className="w-full">
            Continue Shopping
          </Button>
        </CardFooter>
      </Card>

      {/* Checkout Form */}
      <Card className="mt-8">
        <CardHeader>
          <CardTitle>Checkout</CardTitle>
          <CardDescription>Complete your purchase</CardDescription>
        </CardHeader>
        <CardContent>
          <Tabs defaultValue="payment" className="w-full">
            <TabsList className="grid w-full grid-cols-3">
              <TabsTrigger value="payment">Payment</TabsTrigger>
              <TabsTrigger value="shipping">Shipping</TabsTrigger>
              <TabsTrigger value="review">Review</TabsTrigger>
            </TabsList>
            <TabsContent value="payment" className="space-y-4 pt-4">
              <div className="space-y-2">
                <Label htmlFor="card-number">Card Number</Label>
                <Input id="card-number" placeholder="1234 5678 9012 3456" />
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="expiry">Expiry Date</Label>
                  <Input id="expiry" placeholder="MM/YY" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="cvc">CVC</Label>
                  <Input id="cvc" placeholder="123" />
                </div>
              </div>
              <div className="space-y-2">
                <Label htmlFor="name-on-card">Name on Card</Label>
                <Input id="name-on-card" placeholder="John Doe" />
              </div>
              <Button className="w-full mt-4">Continue to Shipping</Button>
            </TabsContent>
            <TabsContent value="shipping" className="space-y-4 pt-4">
              <div className="space-y-2">
                <Label htmlFor="address">Address</Label>
                <Input id="address" placeholder="123 Main St" />
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="city">City</Label>
                  <Input id="city" placeholder="New York" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="zip">ZIP Code</Label>
                  <Input id="zip" placeholder="10001" />
                </div>
              </div>
              <div className="space-y-2">
                <Label htmlFor="country">Country</Label>
                <Input id="country" placeholder="United States" />
              </div>
              <Button className="w-full mt-4">Continue to Review</Button>
            </TabsContent>
            <TabsContent value="review" className="space-y-4 pt-4">
              <div className="rounded-md border p-4">
                <h3 className="font-medium mb-2">Order Summary</h3>
                <div className="space-y-2">
                  <div className="flex justify-between text-sm">
                    <span>Modern Desk Lamp × 1</span>
                    <span>$89.99</span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span>Smart Home Speaker × 2</span>
                    <span>$259.98</span>
                  </div>
                  <Separator className="my-2" />
                  <div className="flex justify-between font-medium">
                    <span>Total</span>
                    <span>$394.96</span>
                  </div>
                </div>
              </div>
              <Button className="w-full mt-4">Complete Order</Button>
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>
    </div>
  )
}