import { Card, CardHeader, CardBody, CardFooter } from './Card';
import { Button } from '../Button/Button';
import { Badge } from '../Badge/Badge';
import { Stack } from '../Stack/Stack';

export function Composed() {
  return (
    <Card style={{ maxWidth: 420 }}>
      <CardHeader
        title="Bandwidth"
        description="Rolling 30 day window"
        actions={<Badge tone="success" dot>Healthy</Badge>}
      />
      <CardBody>
        <Stack gap="2xs">
          <span style={{ fontSize: 'var(--ds-text-3xl)', fontWeight: 'var(--ds-weight-semibold)' }}>
            412 GB
          </span>
          <span style={{ color: 'var(--ds-color-text-muted)' }}>of 1 TB included</span>
        </Stack>
      </CardBody>
      <CardFooter>
        <Button variant="ghost">View details</Button>
        <Button variant="primary">Upgrade plan</Button>
      </CardFooter>
    </Card>
  );
}

export function Elevations() {
  return (
    <Stack direction="horizontal" gap="md" wrap>
      {(['flat', 'raised', 'floating'] as const).map((elevation) => (
        <Card key={elevation} elevation={elevation} padding="md" style={{ width: 160 }}>
          <strong>{elevation}</strong>
          <p style={{ margin: 0, color: 'var(--ds-color-text-muted)' }}>Surface style</p>
        </Card>
      ))}
    </Stack>
  );
}

export function Simple() {
  return (
    <Card padding="lg" style={{ maxWidth: 360 }}>
      <Stack gap="xs">
        <strong>No header needed</strong>
        <span style={{ color: 'var(--ds-color-text-muted)' }}>
          Pass a <code>padding</code> value and use the card as a plain surface.
        </span>
      </Stack>
    </Card>
  );
}

export function Interactive() {
  return (
    <Card interactive padding="md" tabIndex={0} style={{ maxWidth: 320 }}>
      <Stack gap="3xs">
        <strong>gokce.kibrisyazilim.com</strong>
        <span style={{ color: 'var(--ds-color-text-muted)' }}>Deployed 2 hours ago</span>
      </Stack>
    </Card>
  );
}