"use client"

import { CalendarDays } from "lucide-react"

interface PublishDatePickerProps {
  value: string
  onChange: (value: string) => void
  required?: boolean
  disabled?: boolean
}

export function PublishDatePicker({ value, onChange, required, disabled = false }: PublishDatePickerProps) {
  return (
    <div className="flex flex-col gap-1.5">
      <label
        htmlFor="article-publish-date"
        className="text-xs font-bold text-foreground font-sans uppercase tracking-wider"
      >
        Publish Date
        {required && <span className="text-red-500 ml-1">*</span>}
      </label>
      <div className="relative">
        <input
          id="article-publish-date"
          type="date"
          value={value}
          onChange={(e) => onChange(e.target.value)}
          required={required}
          disabled={disabled}
          className="w-full bg-card border border-border rounded-xl pl-10 pr-4 py-2.5 text-sm text-foreground font-sans outline-none focus:ring-2 focus:ring-[#2BB673]/30 focus:border-[#2BB673] transition-colors appearance-none disabled:opacity-60"
        />
        <CalendarDays
          className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none"
          aria-hidden="true"
        />
      </div>
    </div>
  )
}