"use client"
import { Button } from "@/components/ui/button"

interface CompanyInfoProps {
  symbol: string
}

export function CompanyInfo({ symbol }: CompanyInfoProps) {
  // Mock company data
  const companyData = {
    TSLA: {
      symbol: "TSLA",
      marketCap: "$1.4T",
      ipoDate: "Jun 29, 2010",
      ceo: "Elon R. Musk",
      employees: "126K",
      sector: "Consumer Cyclical",
      industry: "Auto - Manufacturers",
      country: "US",
      exchange: "NASDAQ Global Select",
      description:
        "Tesla, Inc. is a leading global manufacturer of electric vehicles and clean energy products, headquartered in Austin, Texas. The company operates in two main segments: Automotive, which includes the...",
      readMore: true,
    },
  }

  const company = companyData[symbol as keyof typeof companyData] || companyData.TSLA

  return (
    <div className="space-y-1 sm:space-y-2 md:space-y-4 lg:space-y-6">
      <div className="border border-border/50 rounded-lg p-2 sm:p-3 md:p-4 space-y-1 sm:space-y-2 md:space-y-3 lg:space-y-4">
        <div className="space-y-0 sm:space-y-0.5 md:space-y-1">
          <div className="flex items-center justify-between py-0.5 sm:py-1">
            <span className="text-xs sm:text-sm text-muted-foreground leading-tight">Symbol</span>
            <span className="text-xs sm:text-sm font-medium text-foreground leading-tight">{company.symbol}</span>
          </div>
          <div className="flex items-center justify-between py-0.5 sm:py-1">
            <span className="text-xs sm:text-sm text-muted-foreground leading-tight">Market Cap</span>
            <span className="text-xs sm:text-sm font-medium text-foreground leading-tight">{company.marketCap}</span>
          </div>
          <div className="flex items-center justify-between py-0.5 sm:py-1">
            <span className="text-xs sm:text-sm text-muted-foreground leading-tight">IPO Date</span>
            <span className="text-xs sm:text-sm font-medium text-foreground leading-tight">{company.ipoDate}</span>
          </div>
          <div className="flex items-center justify-between py-0.5 sm:py-1">
            <span className="text-xs sm:text-sm text-muted-foreground leading-tight">CEO</span>
            <span className="text-xs sm:text-sm font-medium text-foreground leading-tight">{company.ceo}</span>
          </div>
          <div className="flex items-center justify-between py-0.5 sm:py-1">
            <span className="text-xs sm:text-sm text-muted-foreground leading-tight">Fulltime Employees</span>
            <span className="text-xs sm:text-sm font-medium text-foreground leading-tight">{company.employees}</span>
          </div>
          <div className="flex items-center justify-between py-0.5 sm:py-1">
            <span className="text-xs sm:text-sm text-muted-foreground leading-tight">Sector</span>
            <span className="text-xs sm:text-sm font-medium text-foreground leading-tight">{company.sector}</span>
          </div>
          <div className="flex items-center justify-between py-0.5 sm:py-1">
            <span className="text-xs sm:text-sm text-muted-foreground leading-tight">Industry</span>
            <span className="text-xs sm:text-sm font-medium text-foreground leading-tight">{company.industry}</span>
          </div>
          <div className="flex items-center justify-between py-0.5 sm:py-1">
            <span className="text-xs sm:text-sm text-muted-foreground leading-tight">Country</span>
            <span className="text-xs sm:text-sm font-medium text-foreground leading-tight">{company.country}</span>
          </div>
          <div className="flex items-center justify-between py-0.5 sm:py-1">
            <span className="text-xs sm:text-sm text-muted-foreground leading-tight">Exchange</span>
            <span className="text-xs sm:text-sm font-medium text-foreground leading-tight">{company.exchange}</span>
          </div>
        </div>

        <div className="space-y-1 sm:space-y-2 pt-1 sm:pt-2">
          <p className="text-xs sm:text-sm text-muted-foreground leading-snug">{company.description}</p>
          {company.readMore && (
            <Button variant="link" className="p-0 h-auto text-blue-400 text-xs sm:text-sm hover:text-blue-300">
              Read More
            </Button>
          )}
        </div>
      </div>
    </div>
  )
}