import { Avatar } from "pettyui/avatar";
import { Badge } from "pettyui/badge";
import { Card } from "pettyui/card";
import { Image } from "pettyui/image";
import { Separator } from "pettyui/separator";
import { Skeleton } from "pettyui/skeleton";
import { ComponentDemo } from "../component-demo";

/** Avatar demo with image and fallback variants. */
const AvatarDemo = () => (
  <div class="flex items-center gap-4">
    <Avatar class="w-10 h-10 rounded-full overflow-hidden">
      <Avatar.Image src="https://i.pravatar.cc/80?img=3" alt="User avatar" class="w-full h-full object-cover" />
      <Avatar.Fallback class="w-full h-full bg-indigo-100 text-indigo-700 flex items-center justify-center font-medium">MB</Avatar.Fallback>
    </Avatar>
    <Avatar class="w-10 h-10 rounded-full overflow-hidden">
      <Avatar.Image src="/broken-url.jpg" alt="Broken" class="w-full h-full object-cover" />
      <Avatar.Fallback class="w-full h-full bg-emerald-100 text-emerald-700 flex items-center justify-center font-medium">JD</Avatar.Fallback>
    </Avatar>
  </div>
);

/** Badge demo with multiple variants. */
const BadgeDemo = () => (
  <div class="flex items-center gap-2">
    <Badge class="px-2 py-0.5 text-xs font-medium rounded-full bg-gray-100 text-gray-700">Default</Badge>
    <Badge class="px-2 py-0.5 text-xs font-medium rounded-full bg-blue-100 text-blue-700">Info</Badge>
    <Badge class="px-2 py-0.5 text-xs font-medium rounded-full bg-green-100 text-green-700">Success</Badge>
    <Badge class="px-2 py-0.5 text-xs font-medium rounded-full bg-yellow-100 text-yellow-700">Warning</Badge>
    <Badge class="px-2 py-0.5 text-xs font-medium rounded-full bg-red-100 text-red-700">Error</Badge>
  </div>
);

/** Card demo with header, content, and footer. */
const CardDemo = () => (
  <Card class="border border-gray-200 rounded-lg shadow-sm max-w-sm">
    <Card.Header class="px-4 pt-4">
      <Card.Title class="text-lg font-semibold">Card Title</Card.Title>
      <Card.Description class="text-sm text-gray-500">A short description of this card.</Card.Description>
    </Card.Header>
    <Card.Content class="px-4 py-3">
      <p class="text-sm text-gray-700">Card body content goes here.</p>
    </Card.Content>
    <Card.Footer class="px-4 pb-4 flex justify-end gap-2">
      <button type="button" class="px-3 py-1.5 text-sm rounded border border-gray-300 hover:bg-gray-50">Cancel</button>
      <button type="button" class="px-3 py-1.5 text-sm rounded bg-indigo-600 text-white hover:bg-indigo-700">Save</button>
    </Card.Footer>
  </Card>
);

/** Image demo with working and broken sources. */
const ImageDemo = () => (
  <div class="flex items-center gap-4">
    <Image class="w-24 h-24 rounded-lg overflow-hidden">
      <Image.Img src="https://picsum.photos/seed/pettyui/200" alt="Sample" class="w-full h-full object-cover" />
      <Image.Fallback class="w-full h-full bg-gray-200 flex items-center justify-center text-gray-400 text-xs">Loading...</Image.Fallback>
    </Image>
    <Image class="w-24 h-24 rounded-lg overflow-hidden">
      <Image.Img src="/broken.jpg" alt="Broken" class="w-full h-full object-cover" />
      <Image.Fallback class="w-full h-full bg-gray-200 flex items-center justify-center text-gray-400 text-xs">No image</Image.Fallback>
    </Image>
  </div>
);

/** Separator demo with horizontal divider. */
const SeparatorDemo = () => (
  <div>
    <p class="text-sm text-gray-700 mb-2">Above the separator</p>
    <Separator class="h-px bg-gray-200 my-3" />
    <p class="text-sm text-gray-700">Below the separator</p>
  </div>
);

/** Skeleton demo with different shapes. */
const SkeletonDemo = () => (
  <div class="flex items-center gap-4">
    <Skeleton class="w-10 h-10 rounded-full bg-gray-200 animate-pulse" />
    <div class="space-y-2">
      <Skeleton class="h-4 w-32 rounded bg-gray-200 animate-pulse" />
      <Skeleton class="h-3 w-48 rounded bg-gray-200 animate-pulse" />
    </div>
  </div>
);

/** Layout and Display section with all display components. */
export const LayoutDisplaySection = () => (
  <>
    <ComponentDemo name="Avatar" description="User profile image with fallback to initials or icon when image fails to load">
      <AvatarDemo />
    </ComponentDemo>
    <ComponentDemo name="Badge" description="Small status indicator label, typically used for counts, tags, or status">
      <BadgeDemo />
    </ComponentDemo>
    <ComponentDemo name="Card" description="Grouped content container with header, body, and footer sections">
      <CardDemo />
    </ComponentDemo>
    <ComponentDemo name="Image" description="Image element with fallback placeholder when the source fails to load">
      <ImageDemo />
    </ComponentDemo>
    <ComponentDemo name="Separator" description="Visual divider between content sections or menu items">
      <SeparatorDemo />
    </ComponentDemo>
    <ComponentDemo name="Skeleton" description="Placeholder loading indicator that mimics the shape of content being loaded">
      <SkeletonDemo />
    </ComponentDemo>
  </>
);
