Form

import * as React from "react";
import { AuthFormWithImageCollage } from "@/components/ui/form";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

// Define the form fields for the demo
const SignUpForm = (
  <form className="grid gap-4">
    <div className="grid grid-cols-2 gap-4">
      <div className="grid gap-2">
        <Label htmlFor="company-name">Company</Label>
        <Input id="company-name" placeholder="Asos" defaultValue="Asos" required />
      </div>
      <div className="grid gap-2">
        <Label htmlFor="brand-url">Brand URL</Label>
        <Input id="brand-url" placeholder="your-brand.com" required />
      </div>
    </div>
    <div className="grid grid-cols-2 gap-4">
      <div className="grid gap-2">
        <Label htmlFor="first-name">First name</Label>
        <Input id="first-name" placeholder="Max" required />
      </div>
      <div className="grid gap-2">
        <Label htmlFor="last-name">Last name</Label>
        <Input id="last-name" placeholder="Robinson" required />
      </div>
    </div>
    <div className="grid gap-2">
      <Label htmlFor="email">Email</Label>
      <Input
        id="email"
        type="email"
        placeholder="m@example.com"
        required
      />
    </div>
    <div className="grid gap-2">
      <Label htmlFor="password">Password</Label>
      <Input id="password" type="password" required />
    </div>
    <Button type="submit" className="w-full">
      Sign up
    </Button>
  </form>
);

// Footer content with links
const FooterContent = (
  <p>
    By signing up, you confirm that you accept the{" "}
    <a href="#" className="underline">
      Terms of Use
    </a>{" "}
    and{" "}
    <a href="#" className="underline">
      Privacy Policy
    </a>
    .
  </p>
);

// Logo component
const Logo = () => (
  <svg
    width="32"
    height="32"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M6 3H18V7H14V11H10V7H6V3Z"
      className="fill-foreground"
    />
    <path
      d="M6 13H10V17H14V21H6V13Z"
      className="fill-foreground"
    />
  </svg>
);

// Image data for the collage
const collageImages = [
  {
    src: "https://plus.unsplash.com/premium_photo-1710962184909-f9f8dc2c9f5f?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=987",
    alt: "Fashion model in a hype sweatshirt",
    className: "col-span-1 row-span-2", // Spans 2 rows
  },
  {
    src: "https://images.unsplash.com/photo-1552374196-1ab2a1c593e8?w=500&q=80",
    alt: "Well-dressed man",
    className: "col-span-1 row-span-1",
  },
  {
    src: "https://images.unsplash.com/photo-1545291730-faff8ca1d4b0?w=500&q=80",
    alt: "Woman with purple hair",
    className: "col-span-1 row-span-1",
  },
  {
    src: "https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?w=500&q=80",
    alt: "Woman with curly hair",
    className: "col-span-1 row-span-1",
  },
  {
    src: "https://images.unsplash.com/photo-1653071163478-177aa4035184?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8TWFuJTIwd2l0aCUyMGElMjBiZWFyZHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&q=60&w=900",
    alt: "Man with a beard",
    className: "col-span-1 row-span-1",
  },
];


export default function AuthFormWithImageCollageDemo() {
  return (
    <AuthFormWithImageCollage
      logo={<Logo />}
      title="Connect with top talents"
      form={SignUpForm}
      footer={FooterContent}
      images={collageImages}
    />
  );
}