import { Card } from '@rewind-ui/core';

<View>
  <Card color="white">
    // ...
  </Card>

  <Card color="gray">
    // ...
  </Card>

  <Card color="zinc">
    // ...
  </Card>

  <Card color="slate">
    // ...
  </Card>
</View>

<View>
  <Card size="sm">
    // ...
  </Card>

  <Card size="base">
    // ...
  </Card>

  <Card size="md">
    // ...
  </Card>

  <Card size="lg">
    // ...
  </Card>
</View>

<View>
  <Card radius="none">
    // ...
  </Card>

  <Card radius="sm">
    // ...
  </Card>

  <Card radius="base">
    // ...
  </Card>

  <Card radius="md">
    // ...
  </Card>

  <Card radius="lg">
    // ...
  </Card>
</View>

<View>
  <Card shadow="none">
    // ...
  </Card>

  <Card shadow="sm">
    // ...
  </Card>

  <Card shadow="base">
    // ...
  </Card>

  <Card shadow="md">
    // ...
  </Card>

  <Card shadow="lg">
    // ...
  </Card>

  <Card shadow="xl">
    // ...
  </Card>
</View>

<View>
  <Card bordered={true}>
    // ...
  </Card>

  <Card bordered={false}>
    // ...
  </Card>
</View>

<View>
  <Card withDivider={true}>
    // ...
  </Card>

  <Card withDivider={false}>
    // ...
  </Card>
</View>

<View>
  <Card>
    <Card.Image
      alt="A beautiful image"
      caption="This is a beautiful image"
      mode="dark"
      src="..." />
    // ...
  </Card>
</View>

<View>
  <Card className="min-w-[350px]">
    <Card.Header actions={<Button size="xs" color="gray">Action</Button>}>Header</Card.Header>
    // ...
  </Card>
</View>

<View>
  <Card className="max-w-[350px]">
    <Card.Header className="font-medium">
      Terms of service
    </Card.Header>
    <Card.Body className="text-gray-600">
      Welcome to our website. By accessing or using our services, you agree to be bound by the following terms and conditions. If you do not agree to these terms, please do not use our services.
    </Card.Body>
    <Card.Footer className="flex justify-end space-x-2">
      <Button variant="tertiary">Leave</Button>
      <Button variant="primary">Accept</Button>
    </Card.Footer>
  </Card>
</View>

<View>
  <Card className="max-w-[450px] relative">
    <Ribbon size="lg" shadow="base" color="purple" shadowColor="purple" className="z-20">City tour</Ribbon>
    <Card.Image caption="USA" mode="dark" src="https://images.unsplash.com/photo-1496442226666-8d4d0e62e6e9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=450&h=250&q=80" />
    <Card.Body>
      <div className="flex flex-col space-y-2">
        <div className="flex justify-between items-center">
          <span className="text-xl text-gray-800 font-semibold">New York</span>
          <Badge size="sm" color="green" tone="outline">$1,500.00</Badge>
        </div>
        <span className="text-gray-600">Discover the magic of the city that never sleeps, as our experienced guides lead you through the vibrant streets of New York, showcasing its iconic landmarks, hidden gems and rich history.</span>
      </div>
    </Card.Body>
    <Card.Footer>
      <Button className="w-full" color="black">Book now!</Button>
    </Card.Footer>
  </Card>

  <Card className="max-w-[450px] relative">
    <Ribbon size="lg" shadow="base" color="green" shadowColor="green" className="z-20">Boat tour</Ribbon>
    <CardImage caption="Greece" mode="dark" src="https://images.unsplash.com/photo-1506929562872-bb421503ef21?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=450&h=250&q=80" />
    <CardBody>
      <div className="flex flex-col space-y-2">
        <div className="flex justify-between items-center">
          <span className="text-xl text-gray-800 font-semibold">Milos island</span>
          <Badge size="sm" color="green" tone="outline">$2,500.00</Badge>
        </div>
        <span className="text-gray-600">Discover the stunning beauty of Milos Island on our unforgettable boat tour. Let our experienced captain take you on a journey to explore the crystal-clear waters of this idyllic Greek island.</span>
      </div>
    </CardBody>
    <CardFooter>
      <Button className="w-full" color="black">Book now!</Button>
    </CardFooter>
  </Card>
</View>

type CardColor = 'white' | 'gray' | 'slate' | 'zinc';

type CardRadius = 'none' | 'sm' | 'base' | 'md' | 'lg';

type CardShadow = 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl';

type CardSize = 'sm' | 'base' | 'md' | 'lg';