import { Input } from './Input';
import { Stack } from '../Stack/Stack';

const SearchIcon = (
  <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
    <circle cx="7" cy="7" r="4.25" />
    <path d="M10.2 10.2L14 14" strokeLinecap="round" />
  </svg>
);

export function Basic() {
  return (
    <Stack gap="md" style={{ maxWidth: 320 }}>
      <Input label="Full name" placeholder="Ada Lovelace" fullWidth />
      <Input
        label="Work email"
        type="email"
        placeholder="you@company.com"
        hint="We only use this for billing receipts."
        required
        fullWidth
      />
    </Stack>
  );
}

export function WithError() {
  return (
    <Input
      label="Domain"
      defaultValue="not a domain"
      error="Enter a valid domain, e.g. example.com"
      fullWidth
      style={{ maxWidth: 320 }}
    />
  );
}

export function WithIcons() {
  return (
    <Stack gap="md" style={{ maxWidth: 320 }}>
      <Input label="Search" placeholder="Search invoices…" iconStart={SearchIcon} fullWidth />
      <Input label="Storage used" defaultValue="42" iconEnd={<span>GB</span>} fullWidth />
    </Stack>
  );
}

export function Sizes() {
  return (
    <Stack gap="sm" style={{ maxWidth: 320 }}>
      <Input size="sm" placeholder="Small" fullWidth />
      <Input size="md" placeholder="Medium" fullWidth />
      <Input size="lg" placeholder="Large" fullWidth />
    </Stack>
  );
}

export function Disabled() {
  return <Input label="Account ID" defaultValue="acct_9F2K" disabled fullWidth style={{ maxWidth: 320 }} />;
}