import { Card } from '@/components/card'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { CoursesCard } from '@/utils/courses-array'
import { Pencil, Search } from 'lucide-react'
import Link from 'next/link'

const areas = [
  {
    id: '1',
    title: 'Educação',
  },
  {
    id: '2',
    title: 'Negócios',
  },
  {
    id: '3',
    title: 'Comunicação',
  },
  {
    id: '4',
    title: 'Saúde',
  },
  {
    id: '5',
    title: 'Tecnologia',
  },
  {
    id: '6',
    title: 'Teologia',
  },
]

const banners = [
  {
    title: 'Banner Home',
  },
  {
    title: 'CTAs',
  },
]

export default function Admin() {
  return (
    <section className="container">
      <h1 className="text-green-400 text-2xl">Bem vindo, João da Silva,</h1>
      <div className="flex h-auto mb-20">
        <aside className="mt-10 w-[348px]">
          <h2 className="text-purple-50 text-2xl">Áreas</h2>

          <Button className="uppercase mt-6" asChild>
            <Link href="admin/area">+ Adicionar novo</Link>
          </Button>

          <nav className="my-6">
            <ul className="space-y-4">
              {areas.map((area) => (
                <li key={area.title} className="border-b border-green-400">
                  <Link
                    href={`/admin/area/${area.id}`}
                    className="flex justify-between py-2 hover:bg-green-400/10"
                  >
                    <span>{area.title}</span>
                    <Pencil className="text-green-400" />
                  </Link>
                </li>
              ))}
            </ul>
          </nav>

          <h2 className="text-purple-50 text-2xl mt-10">Banners</h2>
          <nav className="my-6">
            <ul className="space-y-4">
              {banners.map((banner) => (
                <li
                  key={banner.title}
                  className="flex justify-between border-b border-green-400 py-2"
                >
                  <Link href="#">{banner.title}</Link>
                  <Pencil className="text-green-400" />
                </li>
              ))}
            </ul>
          </nav>
        </aside>

        <div className="flex-1 ml-4 pl-6 border-l border-gray-50">
          <h2 className="text-purple-50 text-2xl">Cursos</h2>
          <Button className="uppercase mt-6" asChild>
            <Link href="admin/curso">+ Adicionar novo</Link>
          </Button>
          <div className="flex items-center flex-1 my-6">
            <Input className="pr-8" placeholder="Pesquisar" />
            <Search size={24} className="-ml-6" />
          </div>
          <div className="flex flex-wrap justify-around gap-4">
            {CoursesCard.map((course) => (
              <Link
                key={course.id}
                className="lowercase"
                href={`admin/curso/${course.id}`}
              >
                <div className={`bg-gray-100 pb-4 rounded-lg max-w-[163px]`}>
                  <Card.Image image={course.image.src} width="240" height="320">
                    <Card.Title title={course.title} />
                  </Card.Image>
                  <Button
                    variant="secondary"
                    className="flex gap-4 mt-4 mx-auto"
                  >
                    <Pencil />
                    <span className="uppercase">Editar</span>
                  </Button>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}
