import {ArrowUpRight} from '@hugeicons/core-free-icons';
import {HugeiconsIcon} from '@hugeicons/react';
import {Button} from '../ui/button';

export function Card() {
  return (
    <div
      className="
        relative w-full max-w-xs rounded-2xl p-6
        bg-card text-card-foreground
        border border-border
        overflow-hidden
      "
    >
      <div className="flex items-center justify-between mb-6 relative z-10">
        <div className="flex items-center gap-2">
          <div className="size-3 rounded-full bg-foreground/80" />
          <div className="size-3 rounded-full bg-foreground/40" />
        </div>

        <Button variant="ghost" size="sm" className="text-xs px-3 py-1 h-auto">
          Save
        </Button>
      </div>

      <div className="space-y-2 relative z-10">
        <div className="flex items-center gap-2 text-xs text-muted-foreground">
          <span className="font-medium">Variant-01</span>
          <span>•</span>
          <span>5 days ago</span>
        </div>

        <h2 className="text-2xl font-semibold tracking-tight">Web Designer</h2>
      </div>

      <div className="flex gap-2 mt-4 relative z-10">
        {['Part-Time', 'Remote'].map(tag => (
          <span
            key={tag}
            className="
              text-xs px-3 py-1 rounded-md
              bg-secondary text-secondary-foreground
            "
          >
            {tag}
          </span>
        ))}
      </div>

      <div className="my-6 border-t border-border relative z-10" />

      <div className="flex items-center justify-between relative z-10">
        <div>
          <p className="text-xl font-semibold">$85–120</p>
          <p className="text-xs text-muted-foreground">Per every hour</p>
        </div>

        <Button variant="secondary" className="gap-1">
          Apply now
          <HugeiconsIcon icon={ArrowUpRight} size={14} />
        </Button>
      </div>
    </div>
  );
}