import { Tabs } from './Tabs';
import { Badge } from '../Badge/Badge';
import { Stack } from '../Stack/Stack';

export function Underline() {
  return (
    <Tabs
      style={{ maxWidth: 520 }}
      items={[
        { id: 'overview', label: 'Overview', content: 'Traffic, uptime and recent deployments.' },
        { id: 'domains', label: 'Domains', content: 'gokce.kibrisyazilim.com and 2 others.' },
        {
          id: 'members',
          label: 'Members',
          badge: <Badge size="sm">4</Badge>,
          content: 'Manage who can access this project.',
        },
        { id: 'billing', label: 'Billing', content: 'Plan, invoices and payment method.', disabled: true },
      ]}
    />
  );
}

export function Pill() {
  return (
    <Tabs
      variant="pill"
      style={{ maxWidth: 400 }}
      items={[
        { id: 'day', label: 'Day', content: 'Last 24 hours' },
        { id: 'week', label: 'Week', content: 'Last 7 days' },
        { id: 'month', label: 'Month', content: 'Last 30 days' },
      ]}
    />
  );
}

export function FullWidth() {
  return (
    <Stack gap="md" style={{ maxWidth: 400 }}>
      <Tabs
        variant="pill"
        fullWidth
        items={[
          { id: 'signin', label: 'Sign in', content: 'Use your existing account.' },
          { id: 'signup', label: 'Create account', content: 'Start a 14 day trial.' },
        ]}
      />
    </Stack>
  );
}