import { StyledInputs } from '@/components/mui/styled-inputs'
import { Button } from '@/components/ui/button'
import { TextField } from '@mui/material'
import { Trash } from 'lucide-react'

export default function AreaId() {
  return (
    <section className="container py-10">
      <div className="flex items-center gap-6">
        <h1 className="text-green-700 text-3xl font-bold">Editar Área</h1>
        <Button variant="third" className="uppercase">
          Salvar como rascunho
        </Button>
        <Button variant="secondary" className="uppercase">
          Salvar e publicar
        </Button>
        <Button
          variant="ghost"
          className="uppercase flex items-center gap-2 text-orange-100 hover:text-orange-100"
        >
          <span>Apagar área</span>
          <Trash />
        </Button>
      </div>
      <div className="w-full">
        <TextField
          label="Nome da área"
          variant="standard"
          type="text"
          className="flex"
          sx={StyledInputs({ color: '#26AAA7' })}
        />

        <div className="flex justify-between flex-wrap gap-6">
          <div className="flex flex-col flex-1 mt-6">
            <h6 className="text-xl text-purple-100">Banner Desktop</h6>
            <span className="mt-4">Dimensões recomendadas: </span>
            <span>Formatos aceitos: .png, .jpg</span>

            <Button
              variant="third"
              className="border border-dotted border-green-400 rounded-sm mt-6 mx-auto w-full"
            >
              Adicionar banner
            </Button>
          </div>
          <div className="flex flex-col flex-1 mt-6">
            <h6 className="text-xl text-purple-100">Banner Mobile</h6>
            <span className="mt-4">Dimensões recomendadas: </span>
            <span>Formatos aceitos: .png, .jpg</span>
            <Button
              variant="third"
              className="border border-dotted border-green-400 rounded-sm mt-6 mx-auto w-full"
            >
              Adicionar banner
            </Button>
          </div>
        </div>
      </div>
    </section>
  )
}
