Card

import { Card } from "@/components/ui/heroui-card";

function Field({ label, type, placeholder }: { label: string; type: string; placeholder: string }) {
  return (
    <label className="flex flex-col gap-1 text-sm font-medium text-zinc-950 dark:text-zinc-50">
      {label}
      <input
        className="h-10 rounded-xl border border-zinc-200 bg-zinc-50 px-3 text-sm outline-none transition-colors placeholder:text-zinc-400 focus:border-blue-500 dark:border-white/10 dark:bg-white/5 dark:placeholder:text-zinc-500"
        placeholder={placeholder}
        type={type}
      />
    </label>
  );
}

export default function CardWithFormDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
      <Card className="w-full max-w-md">
        <Card.Header>
          <Card.Title>Login</Card.Title>
          <Card.Description>Enter your credentials to access your account</Card.Description>
        </Card.Header>
        <form>
          <Card.Content>
            <div className="flex flex-col gap-4">
              <Field label="Email" placeholder="email@example.com" type="email" />
              <Field label="Password" placeholder="••••••••" type="password" />
            </div>
          </Card.Content>
          <Card.Footer className="mt-4 flex flex-col gap-2">
            <button className="w-full rounded-full bg-zinc-950 px-4 py-2 text-sm font-medium text-white dark:bg-white dark:text-zinc-950" type="submit">
              Sign In
            </button>
            <a className="text-center text-sm font-medium text-blue-600 dark:text-blue-400" href="#">
              Forgot password?
            </a>
          </Card.Footer>
        </form>
      </Card>
    </div>
  );
}

export { CardWithFormDemo };