Card

'use client';
import { useId } from 'react';
import {
  Card,
  CardHeader,
  CardLogo,
  CardLabel,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
  Button,
  Input,
  Icon,
} from '@mbsw/ui';
import { LogIn } from 'lucide-react';

export default function Demo() {
  const settings = {
    "title": "Sign in",
    "description": "Use your work email to sign in.",
    "actionLabel": "Sign in"
  };
  const formId = useId();
  return (
    <Card style={{ maxWidth: '100%' }}>
      <CardHeader>
        <CardLogo>
          <Icon icon={LogIn} size="lg" decorative />
        </CardLogo>
        <CardLabel>
          <CardTitle>{settings.title}</CardTitle>
          <CardDescription style={{ whiteSpace: 'pre-wrap' }}>
            {settings.description}
          </CardDescription>
        </CardLabel>
      </CardHeader>
      <CardContent>
        <form
          id={formId}
          style={{ display: 'grid', gap: 16, width: '100%' }}
          onSubmit={(event) => {
            event.preventDefault();
          }}
        >
          <label style={{ display: 'grid', gap: 8 }}>
            {"Email"}
            <Input
              clearLabel={"Clear input"}
              name="email"
              type="email"
              placeholder="name@company.com"
              autoComplete="off"
              required
            />
          </label>
          <label style={{ display: 'grid', gap: 8 }}>
            {"Password"}
            <Input
              clearLabel={"Clear input"}
              name="password"
              type="password"
              placeholder={"Enter password"}
              autoComplete="off"
              required
            />
          </label>
        </form>
      </CardContent>
      <CardFooter>
        <Button size="lg" type="submit" form={formId} style={{ width: '100%' }}>
          {settings.actionLabel}
        </Button>
      </CardFooter>
    </Card>
  );
}