Card

'use client';

import { Card } from '@/ui/cards/Card';

export function CardDemo() {
  return (
    <Card className="p-24 w-full max-w-sm">
      <h3 className="text-18 font-bold mb-8">Card Title</h3>
      <p className="text-14 text-grey">
        This is a simple card component with bordered theme and custom format.
      </p>
    </Card>
  );
}

'use client';

import { Card } from '@/ui/cards/Card';
import { CardBackground } from '@/ui/cards/CardBackground';
import { CardClickable } from '@/ui/cards/CardClickable';
import { HeadingGroup } from '@/ui/heading/HeadingGroup';
import { Button } from '@/ui/buttons/Button';

export function CardButtonDemo() {
  return (
    <Card theme="frame" format="horizontal" className="max-w-380">
      <CardBackground
        src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4"
        alt="Mountain landscape"
      >
        <CardClickable coverLink className="w-full justify-between">
          <HeadingGroup level={2} subtitle="Winter">
            Mountain Resort
          </HeadingGroup>
          <Button
            color="white"
            theme="outline"
            variant="circle"
            icon="ArrowDefaultRight"
            aria-label="View details"
            className="pointer-events-auto shrink-0"
          />
        </CardClickable>
      </CardBackground>
    </Card>
  );
}

'use client';

import { Card } from '@/ui/cards/Card';
import { CardBackground } from '@/ui/cards/CardBackground';
import { CardClickable } from '@/ui/cards/CardClickable';
import { HeadingGroup } from '@/ui/heading/HeadingGroup';
import { Tag } from '@/ui/Tag';

export function CardTagDemo() {
  return (
    <Card theme="frame" format="horizontal" className="max-w-380">
      <CardBackground
        src="https://images.unsplash.com/photo-1454391304352-2bf4678b1a7a"
        alt="Beach resort"
      >
        <Tag label="Best Seller" className="mx-12 mt-12 self-start px-8" />
        <CardClickable coverLink>
          <HeadingGroup level={2} subtitle="Caribbean">
            Beach Paradise
          </HeadingGroup>
        </CardClickable>
      </CardBackground>
    </Card>
  );
}

'use client';

import { Card } from '@/ui/cards/Card';
import { Chip } from '@/ui/Chip';
import { Icon } from '@clubmed/trident-icons';

export function CardNoBorderDemo() {
  return (
    <Card theme="none" className="p-24 w-full max-w-sm">
      <Chip theme="solid" color="lightSand" size="size-48">
        <Icon name="Star" width="24px" />
      </Chip>
      <h3 className="text-18 font-bold mt-12 mb-8">Premium Service</h3>
      <p className="text-14 text-grey">Experience luxury with our exclusive offerings.</p>
    </Card>
  );
}

'use client';

import { Card } from '@/ui/cards/Card';
import { Chip } from '@/ui/Chip';
import { Icon } from '@clubmed/trident-icons';

export function CardListDemo() {
  return (
    <Card className="p-20 w-full max-w-sm">
      <Chip theme="solid" color="lightSand" size="size-48" className="mb-12">
        <Icon name="Check" width="24px" />
      </Chip>
      <h3 className="text-18 font-bold mb-12">What's Included</h3>
      <ul className="list-disc ps-12 text-14 space-y-4">
        <li>All meals included</li>
        <li>Premium accommodation</li>
        <li>Activity pass</li>
      </ul>
    </Card>
  );
}