<script setup lang="ts">
import { ref } from 'vue'
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@/components/ui/breadcrumb'
import { Button } from '@/components/ui/button'
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
  CarouselDots,
} from '@/components/ui/carousel'
import { Image } from '@/components/ui/image'
import { Price } from '@/components/ui/price'
import { Rating } from '@/components/ui/rating'
import { Separator } from '@/components/ui/separator'
import { SwatchGroup, SwatchGroupItem } from '@/components/ui/swatch-group'
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
import type { PriceType } from '@/lib/format'

interface Color {
  name: string
  value: string
}

interface Size {
  name: string
  inStock: boolean
}

interface BreadcrumbEntry {
  name: string
  href: string
}

interface ProductOverviewData {
  name: string
  price: PriceType
  compareAtPrice?: PriceType
  images: string[]
  rating?: number
  reviewCount?: number
  colors?: Color[]
  sizes?: Size[]
  description?: string
  details?: string[]
  breadcrumbs?: BreadcrumbEntry[]
}

const props = withDefaults(defineProps<{
  product?: ProductOverviewData
}>(), {
  product: () => ({
    name: 'Basic Tee',
    price: { amount: 3500, currency: 'EUR' },
    images: ['/placeholder.svg', '/placeholder.svg', '/placeholder.svg'],
    rating: 3.9,
    reviewCount: 512,
    colors: [
      { name: 'Black', value: '#1A1A1A' },
      { name: 'Heather Grey', value: '#9CA3AF' },
    ],
    sizes: [
      { name: 'XXS', inStock: true },
      { name: 'XS', inStock: true },
      { name: 'S', inStock: true },
      { name: 'M', inStock: true },
      { name: 'L', inStock: true },
      { name: 'XL', inStock: false },
    ],
    description: 'The Basic tee is an honest new take on a classic. The tee uses super soft, pre-shrunk cotton for true comfort and a dependable fit. They are hand cut and sewn locally, with a special dye technique that gives each tee its own look.',
    details: [
      'Only the best materials',
      'Ethically and locally made',
      'Pre-washed and pre-shrunk',
      'Machine wash cold with similar colors',
    ],
    breadcrumbs: [
      { name: 'Women', href: '#' },
      { name: 'Clothing', href: '#' },
    ],
  }),
})

const selectedColor = ref(props.product.colors?.[0]?.value)
const selectedSize = ref(props.product.sizes?.find(s => s.inStock)?.name)
</script>

<template>
  <div class="bg-background pb-16 pt-6 sm:pb-24">
    <!-- Breadcrumbs -->
    <Breadcrumb
      v-if="product.breadcrumbs?.length"
      class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"
    >
      <BreadcrumbList>
        <template v-for="(crumb, i) in product.breadcrumbs" :key="crumb.name">
          <BreadcrumbItem>
            <BreadcrumbLink :href="crumb.href">
              {{ crumb.name }}
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator v-if="i < product.breadcrumbs.length - 1" />
        </template>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>{{ product.name }}</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>

    <div class="mx-auto mt-8 max-w-2xl px-4 sm:px-6 lg:max-w-7xl lg:px-8">
      <div class="lg:grid lg:auto-rows-min lg:grid-cols-12 lg:gap-x-8">
        <!-- Title + Price + Rating (right column header) -->
        <div class="lg:col-span-5 lg:col-start-8">
          <div class="flex justify-between">
            <h1 class="text-xl font-medium">{{ product.name }}</h1>
            <Price size="lg" :price="{ ...product.price, ref: product.compareAtPrice?.amount }" />
          </div>

          <div v-if="product.rating" class="mt-4">
            <Rating :rating="product.rating" size="sm">
              <template #meta>
                <a href="#" class="text-sm text-muted-foreground hover:text-foreground">
                  See all {{ product.reviewCount }} reviews
                </a>
              </template>
            </Rating>
          </div>
        </div>

        <!-- Image gallery with Carousel (left column, spans 3 rows) -->
        <div class="mt-8 lg:col-span-7 lg:col-start-1 lg:row-span-3 lg:row-start-1 lg:mt-0">
          <Carousel class="relative w-full" :opts="{ loop: true }">
            <CarouselContent>
              <CarouselItem v-for="(img, i) in product.images" :key="i">
                <Image
                  :src="img"
                  :alt="`${product.name} - Image ${i + 1}`"
                  class="w-full rounded-lg"
                />
              </CarouselItem>
            </CarouselContent>
            <CarouselPrevious class="left-4" />
            <CarouselNext class="right-4" />
            <CarouselDots />
          </Carousel>
        </div>

        <!-- Product options (right column body) -->
        <div class="mt-8 lg:col-span-5">
          <!-- Color picker -->
          <div v-if="product.colors?.length">
            <h3 class="text-sm font-medium">Color</h3>
            <SwatchGroup
              v-model="selectedColor"
              type="single"
              class="mt-3"
            >
              <SwatchGroupItem
                v-for="color in product.colors"
                :key="color.name"
                :value="color.value"
                :hex="color.value"
                :label="color.name"
                :aria-label="color.name"
              />
            </SwatchGroup>
          </div>

          <!-- Size picker -->
          <div v-if="product.sizes?.length" class="mt-8">
            <div class="flex items-center justify-between">
              <h3 class="text-sm font-medium">Size</h3>
              <a href="#" class="text-sm font-medium text-primary hover:text-primary/80">
                See sizing chart
              </a>
            </div>
            <ToggleGroup
              v-model="selectedSize"
              type="single"
              variant="outline"
              :spacing="3"
              class="mt-3 grid w-full grid-cols-3 sm:grid-cols-6"
            >
              <ToggleGroupItem
                v-for="size in product.sizes"
                :key="size.name"
                :value="size.name"
                :disabled="!size.inStock"
                class="relative uppercase"
              >
                {{ size.name }}
                <svg
                  v-if="!size.inStock"
                  class="pointer-events-none absolute inset-0 size-full stroke-muted-foreground/40"
                  viewBox="0 0 100 100"
                  preserveAspectRatio="none"
                  stroke-width="1"
                >
                  <line x1="0" y1="100" x2="100" y2="0" vector-effect="non-scaling-stroke" />
                </svg>
              </ToggleGroupItem>
            </ToggleGroup>
          </div>

          <Button class="mt-8 w-full" size="lg" color="buy">
            Add to cart
          </Button>

          <!-- Description -->
          <div v-if="product.description" class="mt-10">
            <h3 class="text-sm font-medium">Description</h3>
            <p class="mt-4 text-sm leading-relaxed text-muted-foreground">
              {{ product.description }}
            </p>
          </div>

          <!-- Fabric & Care -->
          <div v-if="product.details?.length" class="mt-8">
            <Separator />
            <div class="pt-8">
              <h3 class="text-sm font-medium">Fabric &amp; Care</h3>
              <ul class="mt-4 list-disc space-y-1.5 pl-5 text-sm text-muted-foreground marker:text-muted-foreground/50">
                <li v-for="(detail, i) in product.details" :key="i" class="pl-2">
                  {{ detail }}
                </li>
              </ul>
            </div>
          </div>

          <!-- Policies -->
          <section class="mt-10">
            <h3 class="sr-only">Policies</h3>
            <dl class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
              <div class="rounded-lg border bg-muted/40 p-6 text-center">
                <dt>
                  <svg xmlns="http://www.w3.org/2000/svg" class="mx-auto size-6 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5a17.92 17.92 0 0 1-8.716-2.247m0 0A8.966 8.966 0 0 1 3 12c0-1.264.26-2.467.729-3.56" />
                  </svg>
                  <span class="mt-4 block text-sm font-medium">International delivery</span>
                </dt>
                <dd class="mt-1 text-sm text-muted-foreground">Get your order in 2-8 days</dd>
              </div>
              <div class="rounded-lg border bg-muted/40 p-6 text-center">
                <dt>
                  <svg xmlns="http://www.w3.org/2000/svg" class="mx-auto size-6 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                  </svg>
                  <span class="mt-4 block text-sm font-medium">Loyalty rewards</span>
                </dt>
                <dd class="mt-1 text-sm text-muted-foreground">Earn points with every purchase</dd>
              </div>
            </dl>
          </section>
        </div>
      </div>
    </div>
  </div>
</template>
Schneesturm Überlebensjacke

Policies
