Image

"use client";

import {
  Card,
  Image,
  CardHeader,
  CardTitle,
  Badge,
  CardDescription,
  CardContent
} from "@pimolu/react";

export function DemoExample() {
  return (
    <div
      className="grid grid-cols-[repeat(auto-fit,minmax(min(100%,280px),1fr))] gap-6 min-w-0 items-start"
    >
      <Card>
        <Image
          src="/images/pimolu-studio.webp"
          alt="Pimolu Studio product illustration"
          aspectRatio={16 / 9}
          fit="cover"
          rounded="none"
          width={400}
          height={300}
        />
        <CardHeader>
          <div
            className="flex flex-wrap items-center gap-3 min-w-0 justify-between"
          >
            <CardTitle>Pimolu Studio</CardTitle>
            <Badge variant="success">In stock</Badge>
          </div>
          <CardDescription>
            A design-system starter with tokens, themes and cross-platform
            components.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div
            className="flex flex-wrap items-center gap-3 min-w-0 justify-between"
          >
            <span className="text-2xl font-medium">€49</span>
            <span className="text-sm text-muted leading-relaxed">Ships in 2–3 days</span>
          </div>
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <div className="flex flex-wrap items-center gap-3 min-w-0">
            <Image
              src="/images/pimolu-avatar.svg"
              alt="Pimolu p emblem on an indigo avatar"
              width={128}
              height={128}
              rounded="full"
              containerStyle={{
                width: 56
              }}
            />
            <div>
              <CardTitle>Jean Dupont</CardTitle>
              <CardDescription>Design engineer</CardDescription>
            </div>
          </div>
        </CardHeader>
        <CardContent>
          <div className="grid gap-5 min-w-0">
            <Image
              src="/images/pimolu-studio.webp"
              alt="Recent work by Jean Dupont"
              aspectRatio={4 / 3}
              fit="cover"
              rounded="md"
              width={400}
              height={300}
            />
            <span className="text-sm text-muted leading-relaxed">Latest case study · 6 min read</span>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}