The Website Builder for Developers

"use client"

import Link from "next/link"
import Image from "next/image"
import { useSession, signIn, signOut } from "next-auth/react"
import { Check } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Card, CardContent } from "@/components/ui/card"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { ImageType } from "@/types"

interface Props {
  badge: string
  title: string
  description: string
  features: { title: string; description: string }[]
  image: ImageType
}

export default function Features({ badge, title, description, features, image }: Props) {
  const { data: session, status } = useSession()
  const isLoading = status === "loading"

  return (
    <div className="w-full">
      {/* Header with auth */}
      <header className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center justify-between py-4">
          <div className="flex items-center gap-2">
            <Link href="/" className="flex items-center gap-2">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="h-6 w-6"
              >
                <path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" />
              </svg>
              <span className="font-medium">Unshift</span>
            </Link>
            
            <nav className="hidden md:flex items-center gap-6 text-sm ml-6">
              <Link href="#" className="transition-colors hover:text-foreground/80">Products</Link>
              <Link href="#" className="transition-colors hover:text-foreground/80">Features</Link>
              <Link href="#" className="transition-colors hover:text-foreground/80">Pricing</Link>
              <Link href="#" className="transition-colors hover:text-foreground/80">About</Link>
            </nav>
          </div>

          <div className="flex items-center gap-2">
            {isLoading ? (
              <Button variant="ghost" size="sm" disabled>
                <svg className="animate-spin -ml-1 mr-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                Loading
              </Button>
            ) : session ? (
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="ghost" className="relative h-8 w-8 rounded-full">
                    <Avatar className="h-8 w-8">
                      {session.user?.image ? (
                        <AvatarImage src={session.user.image} alt={session.user?.name || "User"} />
                      ) : (
                        <AvatarFallback>
                          {session.user?.name?.charAt(0).toUpperCase() || "U"}
                        </AvatarFallback>
                      )}
                    </Avatar>
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent className="w-56" align="end" forceMount>
                  <DropdownMenuLabel className="font-normal">
                    <div className="flex flex-col space-y-1">
                      <p className="text-sm font-medium leading-none">{session.user?.name}</p>
                      <p className="text-xs leading-none text-muted-foreground">
                        {session.user?.email}
                      </p>
                    </div>
                  </DropdownMenuLabel>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem>
                    <Link href="/profile" className="w-full">Profile</Link>
                  </DropdownMenuItem>
                  <DropdownMenuItem>
                    <Link href="/settings" className="w-full">Settings</Link>
                  </DropdownMenuItem>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem onClick={() => signOut()}>
                    Log out
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            ) : (
              <Button onClick={() => signIn()} size="sm" variant="default">
                Sign In
              </Button>
            )}
          </div>
        </div>
      </header>
      
      {/* Content section */}
      <div className="py-20 lg:py-40">
        <div className="container mx-auto">
          <Card className="grid border border-border rounded-lg container py-8 grid-cols-1 gap-8 items-center lg:grid-cols-2">
            <CardContent className="flex flex-col gap-10">
              <div className="flex flex-col gap-4">
                {badge && (
                  <div>
                    <Badge variant="outline">{badge}</Badge>
                  </div>
                )}

                {title && <h2 className="text-3xl lg:text-5xl tracking-tighter max-w-xl font-semibold">{title}</h2>}

                {description && (
                  <p className="text-lg leading-relaxed tracking-tight text-muted-foreground max-w-xl">{description}</p>
                )}
              </div>

              <div className="grid lg:pl-6 grid-cols-1 sm:grid-cols-3 lg:grid-cols-1 gap-6">
                {features.map((feature, index) => (
                  <div key={index} className="flex flex-row gap-6 items-start">
                    <Check className="w-6 h-6 mt-2" />
                    <div className="flex flex-col gap-1">
                      <p>{feature.title}</p>
                      <p className="text-muted-foreground text-sm">{feature.description}</p>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
            <div className="relative bg-muted rounded-md aspect-square overflow-hidden">
              {image && <Image src={image.src} alt={image.alt} fill className="object-cover w-full h-full" />}
            </div>
          </Card>
        </div>
      </div>
    </div>
  )
}