"use client"

import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Truck, Globe, MapPin, Users, ArrowRight } from "lucide-react"
import Link from "next/link"

interface DeliveryInstructionsProps {
  isNigeria: boolean
}

export function DeliveryInstructions({ isNigeria }: DeliveryInstructionsProps) {
  if (isNigeria) {
    return (
      <Card className="bg-gradient-to-br from-green-50 to-emerald-50 border-green-200">
        <CardContent className="p-4 space-y-3">
          <div className="flex items-center gap-2">
            <div className="h-8 w-8 rounded-full bg-green-100 flex items-center justify-center">
              <Truck className="h-4 w-4 text-green-700" />
            </div>
            <h3 className="font-semibold text-green-900">Delivery Options for Nigerian Sellers</h3>
          </div>
          
          <div className="space-y-2 text-sm text-green-800">
            <div className="flex items-start gap-2">
              <Users className="h-4 w-4 mt-0.5 text-green-600 flex-shrink-0" />
              <div>
                <p className="font-medium">Find a Delivery Man</p>
                <p className="text-green-700">Browse our network of trusted delivery men. Filter by location and contact them directly.</p>
              </div>
            </div>
            <div className="flex items-start gap-2">
              <MapPin className="h-4 w-4 mt-0.5 text-green-600 flex-shrink-0" />
              <div>
                <p className="font-medium">Visit a Transport Company</p>
                <p className="text-green-700">You can also visit any transport company near you for nationwide delivery. Common options include ABC Transport, GIG Logistics, and local dispatch riders.</p>
              </div>
            </div>
          </div>

          <div className="space-y-2 pt-1">
            <p className="text-xs font-medium text-green-800">How it works:</p>
            <ol className="text-xs text-green-700 space-y-1 list-decimal ml-4">
              <li>Browse delivery men on the board or find a local courier</li>
              <li>Negotiate the delivery price based on the buyer's location</li>
              <li>After pickup, update the order tracking status with courier details</li>
              <li>Buyer tracks the package and confirms receipt upon delivery</li>
            </ol>
          </div>

          <Link href="/delivery-men">
            <Button className="w-full bg-green-600 hover:bg-green-700 text-white gap-2">
              <Users className="h-4 w-4" />
              Browse Delivery Men
              <ArrowRight className="h-4 w-4" />
            </Button>
          </Link>
        </CardContent>
      </Card>
    )
  }

  // Non-Nigerian sellers
  return (
    <Card className="bg-gradient-to-br from-blue-50 to-indigo-50 border-blue-200">
      <CardContent className="p-4 space-y-3">
        <div className="flex items-center gap-2">
          <div className="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center">
            <Globe className="h-4 w-4 text-blue-700" />
          </div>
          <h3 className="font-semibold text-blue-900">International Delivery Guide</h3>
        </div>

        <div className="space-y-2 text-sm text-blue-800">
          <div className="flex items-start gap-2">
            <MapPin className="h-4 w-4 mt-0.5 text-blue-600 flex-shrink-0" />
            <div>
              <p className="font-medium">Find Local Delivery Services</p>
              <p className="text-blue-700">Look for delivery services or couriers in your area. Ask at local logistics parks, transport hubs, or search online for delivery providers in your city.</p>
            </div>
          </div>
          <div className="flex items-start gap-2">
            <Truck className="h-4 w-4 mt-0.5 text-blue-600 flex-shrink-0" />
            <div>
              <p className="font-medium">Arrange Nationwide Delivery</p>
              <p className="text-blue-700">For cross-country deliveries, major transport companies and postal services can handle long-distance shipping. Compare rates and delivery times.</p>
            </div>
          </div>
        </div>

        <div className="space-y-2 pt-1">
          <p className="text-xs font-medium text-blue-800">How it works:</p>
          <ol className="text-xs text-blue-700 space-y-1 list-decimal ml-4">
            <li>Find a reliable delivery service or courier in your area</li>
            <li>Negotiate the price and arrange pickup/delivery</li>
            <li>After shipping, update the order tracking status</li>
            <li>Share the tracking number so your buyer can follow progress</li>
            <li>Buyer confirms receipt when the item arrives</li>
          </ol>
        </div>
      </CardContent>
    </Card>
  )
}