import { Badge } from '@ui/components/ui/badge'
import { Button } from '@ui/components/ui/button'
import { CardTitle } from '@ui/components/ui/card'
import { Input } from '@ui/components/ui/input'
import type {ReactNode} from 'react';

export function Modal({
  open,
  title,
  onClose,
  children,
}: {
  open: boolean
  title: string
  onClose: () => void
  children: ReactNode
}) {
  if (!open) {
return null
}

  return (
    <div className='fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4'>
      <div className='max-h-[90vh] w-full max-w-5xl overflow-auto rounded-lg border bg-background shadow-xl'>
        <div className='sticky top-0 z-10 flex items-center justify-between border-b bg-background px-4 py-3'>
          <h3 className='text-base font-semibold text-foreground'>{title}</h3>
          <Button type='button' size='sm' variant='outline' className='text-foreground' onClick={onClose}>Tutup</Button>
        </div>
        <div className='p-4'>{children}</div>
      </div>
    </div>
  )
}

export function StepHeading({ step, title }: { step: string; title: string }) {
  return (
    <CardTitle className='text-base text-foreground'>
      <span className='me-2 rounded-md bg-muted px-2 py-0.5 text-xs text-muted-foreground'>{step}</span>
      {title}
    </CardTitle>
  )
}

export function InlineAlert({
  tone,
  children,
}: {
  tone: 'success' | 'error' | 'info'
  children: ReactNode
}) {
  const cls =
    tone === 'success'
      ? 'border-emerald-200 bg-emerald-50 text-emerald-700'
      : tone === 'error'
        ? 'border-red-200 bg-red-50 text-red-700'
        : 'border-blue-200 bg-blue-50 text-blue-800'

  return <div className={`mb-3 rounded-md border px-3 py-2 text-sm ${cls}`}>{children}</div>
}

export function FieldWithStatus({
  label,
  value,
  placeholder,
  picked,
}: {
  label: string
  value: string
  placeholder?: string
  picked: boolean
}) {
  return (
    <div>
      <p className='mb-1 text-sm font-medium text-foreground'>{label}</p>
      <Input value={value} readOnly placeholder={placeholder} className='text-foreground placeholder:text-muted-foreground' />
      <div className='mt-2'>
        <Badge variant={picked ? 'default' : 'secondary'}>
          {picked ? 'Sudah dipilih' : 'Belum dipilih'}
        </Badge>
      </div>
    </div>
  )
}