import { Button, Card } from '@/components/base';
import { Clock, Globe } from 'lucide-react';
import Image from 'next/image';

type JobCardProps = {
  job: {
    id: number;
    title: string;
    company: string;
    logo: string;
    location: string;
    type: string;
    postedAt: string;
  };
};

export default function JobCard({ job }: JobCardProps) {
  return (
    <Card className="rounded-lg border bg-card p-6">
      <div className="flex items-start gap-4">
        <div className="relative size-12 overflow-hidden rounded-full border">
          <Image src={job.logo || '/placeholder.svg'} alt={`${job.company} logo`} fill className="object-cover" />
        </div>
        <div className="flex-1">
          <h3 className="text-lg font-semibold">{job.title}</h3>
          <p className="text-muted-foreground">{job.company}</p>
          <div className="mt-2 flex items-center gap-4 text-sm text-muted-foreground">
            <div className="flex items-center gap-1">
              <Globe className="size-4" />
              {job.location}
            </div>
            <div className="flex items-center gap-1">
              <Clock className="size-4" />
              {job.type}
            </div>
          </div>
        </div>
        <div className="flex flex-col gap-2">
          <Button variant="outline">View</Button>
          <Button>Apply</Button>
        </div>
      </div>
    </Card>
  );
}